<template>
  <page>
    <template v-slot:header>
      <h2>
        <i class="icon iconfont">&#xe611;</i>
        <span>{{ $t("configure.migrate_compare") }}</span>
      </h2>
    </template>
    <template v-slot:content>
      <el-dialog
        :title="title"
        :visible.sync="display"
        :before-close="handleClose"
        width="60%"
      >
        <upload-file v-if="type == 'upload'" @click="handleClose"></upload-file>
      </el-dialog>
      <p>{{ $t("configure.suse_migrate_tool_table_description") }}</p>
      <ky-table
        :getData="getMigrateDiff"
        ref="table"
        :search_data="search_data"
        :search_criteria="search_criteria"
      >
        <template v-slot:table-action>
          <el-dropdown trigger="click">
            <el-button class="kylin-item-button">
              {{ $t("upload")
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <authorization-dropdown-item @click.native="handleUploadMigrateFile">
                {{ $t("configure.upload_migrate_file") }}
              </authorization-dropdown-item>
              <authorization-dropdown-item>
                <el-upload
                  :show-file-list="false"
                  class="upload-demo"
                  :action="action"
                  :limit="1"
                  accept=".json"
                  :headers="header"
                  :file-list="fileList"
                  :on-success="handleSuccess"
                  :on-error="handleError"
                >
                  {{ $t("configure.import_suse_difference_file") }}
                </el-upload>
              </authorization-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <template v-slot:table>
          <!-- <el-table-column type="expand">
            <template slot-scope="scope">
              <expand-table :data="scope.row.data || []"></expand-table>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="libName"
            :label="$t('configure.difference_document_number')"
          >
          </el-table-column>
          <el-table-column prop="sourceOs" :label="$t('configure.hosts')">
          </el-table-column>
          <el-table-column
            prop="sourceArch"
            :label="$t('configure.source_host')"
          >
          </el-table-column>
          <el-table-column
            prop="sourceVersion"
            :label="$t('configure.version_information')"
          >
          </el-table-column>
          <el-table-column
            :label="$t('configure.target_host')"
          >
            <template slot-scope="scope">
              <el-select v-model="scope.row.targetArch">
                <el-option
                  v-for="item in versions"
                  :key="item.name"
                  :value="item.name"
                  :label="item.name"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="$t('action')">
            <template slot-scope="scope">
              <authorization-button
                @click.native.prevent="handleDownload(scope.row)"
                type="text"
                size="medium"
                name="DiffLib:download"
              >
                {{ $t("download") }}
              </authorization-button>
              <authorization-button
                @click.native.prevent="handleTest(scope.row)"
                type="text"
                size="medium"
              >
                {{ $t("configure.test_verification") }}
              </authorization-button>
              <el-popconfirm
                :title="$t('system.script_delete_confirm')"
                @confirm="handleDelete(scope.row)"
                icon-color="red"
                cancel-button-type="default"
                confirm-button-type="danger"
              >
                <authorization-button
                  type="text"
                  slot="reference"
                  size="medium"
                  class="kylin-delete"
                >
                  {{ $t("delete") }}
                </authorization-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </template>
      </ky-table>
    </template>
  </page>
</template>

<script>
import Page from "@/components/Page";
import { getToken } from "@/utils/auth";
import kyTable from "@/components/KyTable";
import {
  getMigrateDiff,
  downloadMigrateDiff,
  deleteMigrateDiff,
} from "@/api/migrate_diff";
import UploadFile from "./form/uploadFile.vue";
import { download } from "@/utils";
/* import ExpandTable from "./expandTable.vue"; */
import AuthorizationButton from "@/components/AuthorizationButton";
import AuthorizationDropdownItem from "@/components/AuthorizationDropdownItem";
export default {
  name: "migrate_compare_index",
  components: {
    Page,
    kyTable,
    UploadFile,
    AuthorizationButton,
    AuthorizationDropdownItem,
    /* ExpandTable, */
  },
  activated() {
      this.$refs.table.handleSearch();
  },
  data() {
    return {
      search_data: {
        libName: {
          name: "configure.difference_document_number",
          type: "text",
        },
        sourceOs: {
          name: "configure.hosts",
          type: "text"
        },
        sourceArch: {
          name: "configure.source_host",
          type: "select",
          items: [
            {
              key: "aarch64",
              name: "aarch64",
            },
            {
              key: "x86_64",
              name: "x86_64",
            },
          ],
        },
        sourceVersion: {
          name: "configure.version_information",
          type: "text",
        },
      },
      header: { authToken: getToken() },
      search_criteria: {
        sortBy: "id",
        sortOrder: "desc",
      },
      action: "/api/migrate/diff/import",
      versions: [
        { id: 0, name: "V10(SP1)-x86_64" },
        { id: 1, name: "V10(SP1)-aarch64" },
      ],
      version: 0,
      fileList: [],
      type: "",
      title: "",
      display: false,
    };
  },
  methods: {
    getMigrateDiff,
    handleDownload(row) {
      downloadMigrateDiff({ libId: row.id }).then((res) => {
        if (res.data.code) {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        } else {
          download(res, row.libName, "json");
        }
      });
    },
    handleTest(row) {
      if (!row.targetArch) {
        this.$message({
          type: "error",
          message: this.$t("configure.target_arch_require"),
        });
      } else {
        let obj = localStorage.getItem('selectTargetArchs')
        if(obj) {
          obj = JSON.parse(obj)
          obj[row.id] = row.targetArch
        } else {
          obj = {[row.id]: row.targetArch}
        }
        localStorage.setItem('selectTargetArchs', JSON.stringify(obj))
        this.$router.push({
          name: "migrate_compare_detail",
          params: { id: row.id },
          query: { os_info: row.targetArch, libName: row.libName },
        });
      }
    },
    handleDelete(row) {
      deleteMigrateDiff({ libId: row.id }).then((res) => {
        if (res.data.code == "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
        this.$refs.table.handleSearch();
      });
    },
    handleUploadMigrateFile() {
      this.type = "upload";
      this.title = this.$t("configure.upload_migrate_file");
      this.display = true;
    },
    handleSuccess(res) {
      this.fileList = [];
      if (res.code == "0") {
        this.$message({
          type: "success",
          message: res.message,
        });
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
      this.$refs.table.handleSearch();
    },
    handleClose() {
      this.type = "";
      this.title = "";
      this.display = false;
      this.$refs.table.handleSearch();
    },
    handleError(res) {
      this.fileList = [];
      this.$message({
        type: "error",
        message: res.message,
      });
    },
  },
};
</script>

<style>
</style>